<template>
    <div class="app-container">
      <div>
        <el-row>
          <el-col :span="20" :offset="2">
            <el-button size="mini" type="success" @click="addDept">添加</el-button>
    <el-table
    :data="depts_tree1"
    style="width: 100%"
    border
    row-key="id"
    
    lazy
    :load="load"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="id"
      label="ID"
      >
    </el-table-column>
    <el-table-column
      prop="name"
      label="部门名称"
      >
    </el-table-column>
    <el-table-column
      prop="parent"
      label="上级部门"
    
      >
    </el-table-column>
    <el-table-column
      prop="orderNum"
      label="排序"
    
      >
    </el-table-column>
    <el-table-column
      prop="createBy"
      label="创建人"

      >
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="创建时间"

      >
    </el-table-column>
    <el-table-column
      prop="handle"
      label="操作"

      >
      <template slot-scope="scope">
      <el-button size="mini" type="danger" @click="delDeptDialog(scope.row.id)">删除</el-button>
    <el-button size="mini" type="info" @click="editDeptDialog(scope.row.id)">编辑</el-button>
    </template>
    </el-table-column>
  </el-table>
      <add-dept-dialog @refresh="refresh" ref="addDialog"></add-dept-dialog>
      <edit-dept-dialog @refresh="refresh" ref="editDialog"></edit-dept-dialog>
      <!-- <del-dept-dialog @refresh="refresh" ref="delDialog"></del-dept-dialog> -->
          </el-col>

        </el-row>
      </div>
      <div>

        <template>
<div>

  
</div>
</template>

      </div>
      
  
    </div>
  
</template>

<script>
  import http from '@/utils/request.js'
  import AddDeptDialog from './AddDeptDialog.vue'
  import EditDeptDialog from './EditDeptDialog.vue'




    export default {
      components:{
        AddDeptDialog,
        EditDeptDialog,

      },
      data() {
        return{
   
          depts_tree1: []
          
        }
      },

   mounted(){

    this.showDept();
    
      
    
    
    
    },
    methods: {

    showDept(){
      
      http.get(`/dept`).then((res)=>{
        console.log("主页面的res: -------->",res);
        this.depts_tree1 = res
        
      },)
    },
    hello(){},
    

    async delDeptDialog(id){
      // this.$refs.delDialog.delDeptDialogVisible = true
      console.log("id的值-------------------》》",id);
      try {
        // 对于this.confirm() 使用 await等待的时候，用户点击取消，是通过抛异常的方式
        await this.$confirm("你确定要删除这条数据吗?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          closeOnClickModal: false,
          type: "success",
        });
        // 代码如果能够走下来表示用户点击了确认按钮
        // 删除用户
        await http.delete(`dept/${id}`);
        this.$message({ message: "删除成功", type: "success", duration: 1000 });
        this.refresh();
      } catch (err) {
        // 代码如果进入了 catch块，表示用户点击了取消按钮
        console.log(err);
      }
      this.showDept();
      
    },

       // 用户点击编辑按钮
    editDeptDialog(id) {
      console.log("edit---------->id",id);
      this.$refs.editDialog.getById(id);
      // 让编辑模态框展示
      this.$refs.editDialog.editDeptDialogVisible = true
    },
    async addDept() {
       this.$refs.addDialog.addDeptDialogVisible = true
      this.refresh();
      // this.showDept();
    },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      refresh(){

        this.showDept();

      }
    
     
    }
  }
  </script>

<style>

</style>
